﻿<MudDropContainer T="SimpleDropItem"
				  Items="_items" ItemsSelector="@((item,dropzone) => item.ZoneIdentifier == dropzone)"
				  Class="d-flex"
				  CanDropClass="can-drop-from-container" NoDropClass="no-drop-class-from-container"
				  CanDrop="@( (item,columnIdentifier) => item.ZoneIdentifier != columnIdentifier)"
				  ItemDropped="ItemUpdated" ApplyDropClassesOnDragStarted="@ApplyDropClassesOnDragStarted">
	<ChildContent>
		<MudDropZone T="SimpleDropItem" Identifier="Column 1" Class="first-drop-zone">
			<MudText Typo="Typo.h6" Class="mb-4">Drop Zone 1</MudText>
		</MudDropZone>
		<MudDropZone T="SimpleDropItem" Identifier="Column 2" Class="second-drop-zone"
					 ApplyDropClassesOnDragStarted="@SecondColumnAppliesClassesOnDragStarted"
					 CanDropClass="can-drop-from-zone" NoDropClass="no-drop-class-from-zone">
			<MudText Typo="Typo.h6" Class="mb-4">Drop Zone 2</MudText>
		</MudDropZone>
		<MudDropZone T="SimpleDropItem" Identifier="Column 3" Class="third-drop-zone" CanDrop=@( (item) => false)>
			<MudText Typo="Typo.h6" Class="mb-4">Drop Zone 2</MudText>
		</MudDropZone>
	</ChildContent>
	<ItemRenderer>
		<MudText>@context.Name</MudText>
	</ItemRenderer>
</MudDropContainer>

@code {
    private readonly IEnumerable<SimpleDropItem> _items =
    [
        new("First Item", "Column 1"),
        new("Second Item", "Column 1"),
        new("Third Item", "Column 1")
    ];

	[Parameter]
	public bool ApplyDropClassesOnDragStarted { get; set; }

	[Parameter]
	public bool? SecondColumnAppliesClassesOnDragStarted { get; set; }

	private static async Task ItemUpdated(MudItemDropInfo<SimpleDropItem> dropItem)
    {
        // simulate async/await and force re-rendering
	    await Task.Delay(1);

        if (dropItem.Item != null)
        {
            dropItem.Item.ZoneIdentifier = dropItem.DropzoneIdentifier;
        }
    }

    public class SimpleDropItem(string name, string zoneIdentifier)
    {
        public string Name { get; set; } = name;

        public string ZoneIdentifier { get; set; } = zoneIdentifier;
    }
}
